<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
        圆角记忆方法
        从左上角开始顺时针排开，如果遇到没有属性的角，就看这个角的对角是什么，它就是什么。
        圆形的前提是：盒子是正方形的,设置宽高的一半或者是50%
        胶囊：高度的一半
    */
    .box1 {
        width: 800px;
        height: 400px;
        background-color: pink;

        /* 分别设置四个角 */
        /* border-radius: 20px 50px 70px 100px; */
        /* 设置三个角 */
        /* border-radius: 20px 50px 70px; */
        /* 设置两个角 */
        /* border-radius: 20px 50px; */
        /* 设置一个角 */
        /* border-radius: 50px; */


        /* 圆形 */
        /* border-radius: 100%; */
        /* 胶囊 */
        border-radius: 200px;
    }
</style>

<body>
    <div class="box1"></div>
</body>

</html>